<template>
  <jm-card>
    <template #header>
      <div class="card-header">
        <span>搜索字段说明</span>
      </div>
    </template>
    <div class="search-field-type">
      <div class="field-type-class flex justify-start">
        <div class="tabs">
          <div class="head">字段分类</div>
          <div class="tab-list">
            <div
              class="tab"
              :class="{ active: activeIndex === index }"
              v-for="(item, index) in tabList"
              :key="index"
              @click="activeIndex = index"
            >
              {{ item.classification }}
            </div>
          </div>
        </div>
        <div class="content">
          <jmp-table :data="records" :columns="ruleTable.columns" />
        </div>
      </div>
    </div>
  </jm-card>
</template>

<script setup lang="tsx">
import { reactive, onMounted, computed, ref } from 'vue'
import { getSearchGrammar } from '@/api/search/index'
const activeIndex = ref(0)
const tabList = ref([])
const ruleTable = reactive({
  columns: [
    {
      prop: 'field',
      label: '字段名称'
    },
    {
      prop: 'fieldType',
      label: '字段类型',
      width: 80
    },
    {
      prop: 'fieldMeaning',
      label: '字段含义'
    }
  ]
})
const getInfo = () => {
  getSearchGrammar("A").then((res) => {
    tabList.value = res.data.rows || []
  })
}
const records = computed(() => {
  return tabList.value[activeIndex.value]?.searchFields || []
})
onMounted(() => {
  getInfo()
})
</script>
<style lang="scss">
.search-field-type {
  .field-type-class {
    // @include flex-start;

    height: 368px;
    .tabs {
      flex-shrink: 0;
      height: 100%;
      background-color: #f3f4f7;
      border-right: 1px solid #ebeef5;
      .head {
        height: 44px;
        padding: 0 10px;
        color: #909399;
        font-weight: 700;
        font-size: 14px;
        line-height: 44px;
      }
      .tab-list {
        &::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }

        height: calc(100% - 44px);
        overflow: auto;
        .tab {
          height: 44px;
          padding: 0 10px;
          color: #909399;
          line-height: 44px;
          cursor: pointer;
          &.active,
          &:hover {
            color: #396fff;
          }
        }
      }
    }
    .content {
      flex: 1;
      height: 100%;
      overflow: hidden;
      border-right: 1px solid #ebeef5;
    }
  }
}
</style>
